<template>
  <div>
    <el-col :span="21"
      ><div class="grid-content bg-purple-dark">
        <el-input
          v-model="search"
          placeholder="请输入要搜索的科室名字"
          style="width:240px"
          suffix-icon="el-icon-search"
        >
        </el-input>
        <el-button @click="kemuSearch">搜索</el-button>
      </div></el-col
    >
    <!-- 添加 -->
    <el-button
      size="mini"
      type="primary"
      @click="
        dialogFormVisible1 = true;
        add();
      "
      >添加</el-button
    >
    <!-- 医生所属科室表 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin:auto;line-height:20px;marginTop: 20px;"
    >
      <el-table-column prop="doctorNo" label="医生代号" align="center">
      </el-table-column>
      <el-table-column prop="doctorName" label="医生姓名" align="center">
      </el-table-column>
      <el-table-column prop="subjectNo" label="所属科室代号" align="center">
      </el-table-column>
      <el-table-column prop="subjectName" label="所属科室" align="center">
      </el-table-column>
      <el-table-column prop="subjectNol" label="兼科代号" align="center">
      </el-table-column>
      <el-table-column prop="personNo" label="工资代号" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="pagesize"
        :pageCount="maxPage"
        :total="count"
      ></el-pagination>
    </div>

    <!-- 添加弹框 -->
    <el-dialog
      title="添加医生信息"
      :visible.sync="dialogFormVisible1"
      width="30%"
      :append-to-body="true"
    >
      <el-form :model="form1" ref="form1">
        <el-form-item label="医生代号" :label-width="formLabelWidth">
          <el-input v-model="form1.doctorNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="医生姓名" :label-width="formLabelWidth">
          <el-input v-model="form1.doctorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="所属科室代号"
          :label-width="formLabelWidth"
          prop="subjectNo"
        >
          <el-input v-model="form1.subjectNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属科室" :label-width="formLabelWidth">
          <el-select
            v-model="form1.subjectName"
            placeholder="请选择科室"
            @change="keshis"
          >
            <el-option
              v-for="item in keshiData"
              :key="item.subjectNo"
              :label="item.subjectName"
              :value="item.subjectName"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="兼科代号" :label-width="formLabelWidth">
          <!-- <el-input v-model="form1.subjectNol" autocomplete="off"></el-input> -->
          <el-select
            v-model="form1.subjectNol"
            placeholder="请选择科室"
            @change="keshis"
          >
            <el-option
              v-for="item in keshiData"
              :key="item.subjectNo"
              :label="item.subjectNo"
              :value="item.subjectNo"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工资代号" :label-width="formLabelWidth">
          <el-input v-model="form1.personNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible1 = false;
            addqued();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog
      title="修改门诊科目"
      :visible.sync="dialogFormVisible2"
      width="30%"
      :append-to-body="true"
    >
      <el-form :model="form2">
        <el-form-item label="医生代号" :label-width="formLabelWidth">
          <el-input
            v-model="form2.doctorNo"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="医生姓名" :label-width="formLabelWidth">
          <el-input v-model="form2.doctorName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属科室代号" :label-width="formLabelWidth">
          <el-input v-model="form2.subjectNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属科室" :label-width="formLabelWidth">
          <el-input v-model="form2.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="兼科代号" :label-width="formLabelWidth">
          <el-input v-model="form2.subjectNol" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工资代号" :label-width="formLabelWidth">
          <el-input v-model="form2.personNo" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible2 = false;
            editqued();
          "
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from "vuex";
// import { URL } from "../../../../utils/fanapi";
// import { delFn } from "../../../../utils/delfan";
export default {
  name: "",
  components: {},
  data() {
    return {
      search: "",
      tableData: [],
      pagesize: 3,
      nowpage: 1,
      count: 0,
      //添加
      dialogFormVisible1: false,
      form1: {
        doctorNo: "",
        doctorName: "",
        subjectNo: "",
        subjectName: "",
        subjectNol: "",
        personNo: "",
      },
      formLabelWidth: "120px",
      // 修改
      dialogFormVisible2: false,
      form2: {
        doctorNo: "",
        doctorName: "",
        subjectNo: "",
        subjectName: "",
        subjectNol: "",
        personNo: "",
      },
      keshiData: [],
    };
  },
  computed: {
    maxPage() {
      return Math.ceil(this.count / this.pagesize);
    },
  },
  methods: {
    ...mapActions(["tongyong"]),
    changePage(val) {
      this.nowpage = val;
      if (this.search) {
        this.kemuSearch();
      } else {
        this.getData();
      }
    },
    //渲染数据
    getData() {
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/doctor/select/selectAll",
      // method: "post",
      // data: { page: this.nowpage, pageSize: this.pagesize },
      // }).then((data) => {
      // console.log(data);
      // if (data.data.code == 200) {
      // this.count = data.data.count;
      // this.tableData = data.data.data;
      // }
      // });
      this["tongyong"]({
        name: "DOCTOR_XUANRAN",
        data: { page: this.nowpage, pageSize: this.pagesize },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.count = data.data.count;
          this.tableData = data.data.data;
        }
      });
    },
    //所属科室渲染
    getkeshiData() {
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/subject/select/selectAll",
      // method: "post",
      // data: { page: 1, pageSize: 50 },
      // }).then((data) => {
      // console.log(data.data.data);
      // this.keshiData = data.data.data;
      // });
      this["tongyong"]({
        name: "KEMU_XUANRAN",
        data: { page: 1, pageSize: 50 },
      }).then((data) => {
        console.log(data.data.data);
        this.keshiData = data.data.data;
      });
    },
    //选择科室后，自动填充科室代号
    keshis() {
      for (let i = 0; i < this.keshiData.length; i++) {
        console.log(i);
        if (this.form1.subjectName == this.keshiData[i].subjectName) {
          return (this.form1.subjectNo = this.keshiData[i].subjectNo);
        } else {
          this.form1.subjectNo = "";
        }
      }
    },
    // 添加
    add() {
      // console.log(this.form1);
    },
    // 确定添加
    addqued() {
      // this.$axios({
      // url: URL + "//zsdx-outpatient-service/menzhen/doctor/add/insert",
      // method: "post",
      // data: this.form1,
      // }).then((res) => {
      // console.log(res);
      // this.getData();
      // });
      this["tongyong"]({
        name: "DOCTOR_TIANJIA",
        data: this.form1,
      }).then((res) => {
        console.log(res);
        this.getData();
      });
    },
    // 修改
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible2 = true;
      this.form2 = {
        doctorNo: row.doctorNo,
        doctorName: row.doctorName,
        subjectNo: row.subjectNo,
        subjectName: row.subjectName,
        subjectNol: row.subjectNol,
        personNo: row.personNo,
      };
    },
    //确定修改,
    editqued() {
      // this.$axios({
      // url: URL + "//zsdx-outpatient-service/menzhen/doctor/update/update",
      // method: "post",
      // data: this.form2,
      // }).then((data) => {
      // console.log(data.data.msg);
      // this.getData();
      // });
      this["tongyong"]({
        name: "DOCTOR_XIUGAI",
        data: this.form2,
      }).then((data) => {
        console.log(data.data.msg);
        this.getData();
      });
    },
    // 删除
    handleDelete(index, row) {
      console.log(index, row.doctorNo);
      // delFn(
      // {
      // url:
      // URL +
      // "/zsdx-outpatient-service/menzhen/doctor/delete/" +
      // row.doctorNo,
      // params: { id: row.doctorNo },
      // method: "post",
      // },
      // this
      // ).then((data) => {
      // console.log(data);
      // this.getData();
      // });
      this["tongyong"]({
        name: "DOCTOR_SHANCHU",
        data: { id: row.subjectNo },
      }).then((data) => {
        console.log(data);
        this.getData();
      });
    },
    //查询
    kemuSearch() {
      // this.$axios({
      // url: URL + "/zsdx-outpatient-service/menzhen/doctor/select/selectBySub",
      // method: "post",
      // data: {
      // name: this.search,
      // page: this.nowpage,
      // pageSize: this.pagesize,
      // },
      // }).then((data) => {
      // this.tableData = data.data.data;
      // this.count = data.data.count;
      // });
      this["tongyong"]({
        name: "DOCTOR_SEARCH",
        data: {
          name: this.search,
          page: this.nowpage,
          pageSize: this.pagesize,
        },
      }).then((data) => {
        this.tableData = data.data.data;
        this.count = data.data.count;
      });
    },
  },
  created() {
    this.getData({
      nowpage: this.nowpage, //当前页
      pagesize: this.pagesize, //一页显示多少条数据
    });
    this.getkeshiData();
    this.kemuSearch({
      nowpage: this.nowpage,
      pagesize: this.pagesize,
    });
  },
};
</script>
<style lang="less" scoped>
.el-pagination {
  text-align: center;
}
.el-input {
  width: 90%;
}
</style>
